{extend name='app' /}
{block name='title'}标签列表{/block}

{block name="stylesheet"}
{/block}


{block name="breadcrumb"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>标签列表</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a>项目管理</a>
            </li>
            <li class="breadcrumb-item active">
                <strong>标签列表</strong>
            </li>
        </ol>
    </div>
</div>
{/block}


{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">

                <div class="ibox-content">

                    <form id="block-search">
                        <div class="row m-b-lg">
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <input placeholder="请输入标签名" type="text" class="form-control" name="name" value="{$search['name'] ?? ''}">
                                </div>
                            </div>
                            <div class="col-sm btn-group-search">
                                <button class="btn btn-primary btn-sm" type="submit">确定</button>
                                <button class="btn btn-white btn-sm btn-reset" type="button">重置
                                </button>
                            </div>
                        </div>
                    </form>

                    <div class="row">
                        <div class="col-sm m-b-sm">
                                  <span class="float-left">
                                    <button class="btn btn-primary btn-sm" type="button" onclick="get_html($(this),'{$Think.config.admin.app_host}/admin/label/create')"><i class="fa fa-plus"></i>&nbsp;添加
                                    </button>
                                </span>
                            <span class="float-right btn-group">
                                    <button class="btn btn-white btn-sm btn-outline btn-search" type="button"><i class="fa fa-search"></i>&nbsp;搜索
                                    </button>
                                </span>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>名称</th>
                                <th>排序</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {foreach $list as $index => $item}
                                <tr>
                                    <td>{++$index}</td>
                                    <td>{$item->name}</td>
                                    <td width="80">
                                        <input type="text" class="form-control" name="sort" value="{$item->sort}" onchange="post_data($(this),'{$Think.config.admin.app_host}/admin/label/renew/{$item->id}',{sort:$(this).val()})">
                                    </td>
                                    <td><input type="checkbox" class="js-switch"
                                           {if $item->status == 1}
                                                checked
                                            {/if}
                                        onchange="change_status($(this),'{$Think.config.admin.app_host}/admin/label/renew/{$item->id}')"/>
                                    </td>
                                    <td>
                                        <button class="btn btn-info btn-xs" type="button" onclick="get_html($(this),'{$Think.config.admin.app_host}/admin/label/{$item->id}/edit')"><i class="fa fa-pencil"></i>&nbsp;编辑
                                        </button>
                                    </td>
                                </tr>
                            {/foreach}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
{/block}

{block name="script"}

<script>
    let switchery_arr = [];
    let elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function (value, index) {
        let switchery = new Switchery(value, {color: '#1AB394', size: 'small'});
        switchery_arr.push(switchery);
    });

    function change_status(that, url) {
        // 获取当前checkbox的switchery 对象
        var index = $('.js-switch').index(that);
        let switchery = switchery_arr[index];
        var status = 0;
        if (switchery.isChecked() == true) {
            status = 1;
        }
        let response = post_request(url, {'status': status});
        if (response.status == 1) {
            show_tip('提示', response.msg, 'success');
        } else {
            show_tip('提示', response.msg, 'error');

            // 获取当前复选框的状态，并保持未change时的状态
            let status = that.prop("checked")
            if (status == false) {
                setSwitchery(switchery, true);
            } else {
                setSwitchery(switchery, false);
            }
        }
    }

    // 修改 checkbox 状态
    function setSwitchery(switchElement, checkedBool) {
        if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
            switchElement.setPosition(true);
            // switchElement.handleOnchange(true);
        }
    }
</script>
{/block}
